<template>
  <div style="padding: 20px; background-color: #f0f8ff; border-radius: 8px; margin: 20px 0;">
    <h2>插值表达式详解</h2>
    
    <h3>1. Composition API 方式（使用 &lt;script setup&gt;）</h3>
    <p>消息: {{ message }}</p>
    <p>计数: {{ count }}</p>
    <p>计算结果: {{ count * 2 }}</p>
    <button @click="increment">增加计数</button>
    
    <hr style="margin: 20px 0;" />
    
    <h3>2. Options API 方式（传统的 data() 方法）</h3>
    <p>问候语: {{ greeting }}</p>
    <p>是否可见: {{ isVisible ? '是' : '否' }}</p>
    <button @click="toggleVisibility">切换可见性</button>
  </div>
</template>

<script setup>
// Composition API 方式定义响应式数据
import { ref } from 'vue'

const message = ref('Hello from Composition API!')
const count = ref(0)

function increment() {
  count.value++
}
</script>

<script>
// Options API 方式定义组件
export default {
  data() {
    return {
      greeting: 'Hello from Options API!',
      isVisible: true
    }
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible
    }
  }
}
</script>